<script lang="ts" setup name="TimeintervalDialog">
import { Dialog } from '~/src/api/interface'
import { StoreManagement } from '~/src/api/interface/storeManagement'
import { TimeintervalDialogColumn } from '../columns'

const dialogProps = reactive<Dialog<StoreManagement.StoreMarketDetail[]>>({
  title: '新增',
  data: [],
  visible: false,
})
const { title, visible } = toRefs(dialogProps)
const handleSubmit = () => {}

const acceptParams = (params: Dialog<StoreManagement.StoreMarketDetail[]>) => {
  Object.assign(dialogProps, params)
  dialogProps.visible = true
}
defineExpose({ acceptParams })
</script>

<template>
  <vab-dialog v-model:modelValue="visible" :title="title + '门店用餐时段'" :width="800">
    <!-- <div :style="{ marginTop: '-20px' }"> -->
    <pro-table
      ref="proTable"
      :border="false"
      :columns="TimeintervalDialogColumn"
      :data="dialogProps.data"
      :pagination="false"
      row-key="id"
      size="small"
      :tool-button="false"
    >
      <template #index="scope">
        <el-text>{{ '餐段' + (Number(scope.$index) + 1) }}</el-text>
      </template>
      <template #name="scope">
        <el-input v-model="scope.row.name" />
      </template>
      <template #starTime="scope">
        <el-time-picker v-model="scope.row.starTime" class="w100" format="HH:mm" value-format="HH:mm" />
      </template>
      <template #endTime="scope">
        <el-time-picker v-model="scope.row.endTime" class="w100" format="HH:mm" value-format="HH:mm" />
      </template>
      <template #status="scope">
        <el-switch v-model="scope.row.status" />
      </template>
    </pro-table>
    <!-- </div> -->
    <template #footer>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
